import React, { useEffect, useRef, useState } from 'react'
import image1 from './img/1.png';
import image2 from './img/2.png';
export default function Slam() {
  const cadRef = useRef(null);
  const [ctx, setCtx] = useState(null);
  useEffect(() => {
    const { id } = cadRef.current;
    const canvas = document.getElementById(id);
    let newCtx = canvas.getContext('2d');
    setCtx(newCtx);
  }, [cadRef]);
  useEffect(() => {
    if (!ctx) return;
    const img1 = new Image();
    img1.src = image1;
    img1.onload = function () {
      ctx.drawImage(img1, 0, 0);
    }
    const img2 = new Image();
    img2.src = image2;
    img2.onload = function () {
      ctx.drawImage(img2, 640, 0);
    }
  }, [ctx])
  return (
    <div>
      <canvas id='rcad' ref={cadRef} width='1280' height='550' />
    </div>
  )
}
